<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<wd-input use-suffix-slot v-model="formData.title" clearable prop="title"
							custom-class="wd-input-custom-class-fd-col  bg-transparent square" label="标题："
							label-width="100px" placeholder="请输入">
						</wd-input>

						<view class="form-item">
							<wd-cell required title="内容：" vertical>
								<wd-textarea v-model="formData.desc" prop="desc" placeholder="请输入" label="" />
							</wd-cell>
						</view>
						<view class="form-item ">
							<wd-cell required title="日期：" vertical>
								<wd-datetime-picker :minDate="minDate" prop="date" type="date"
									v-model="formData.date" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell required title="时间：" vertical>
								<wd-datetime-picker type="time" v-model="formData.time" />
							</wd-cell>
						</view>
						<wd-picker v-model="formData.anjian_id" clearable prop="anjian_id" value-key="id"
							label-key="anjian_name" custom-class="wd-picker-custom-class-fd-col square bg-transparent"
							:columns="caseList" label="选择相关案件：" />
					</wd-form>
				</view>
				<view class="footer" id="footer">
					<view class="btns">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success  wd-button-custom-class-w100">提交</wd-button>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>


</template>

<script lang="ts">
	import { defineComponent, ref, onMounted, reactive, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter.ts';


	import {
		getCaseORderList,
		doAddTips
	} from "@/api/index"
	export default defineComponent({
		name: '',
		components: {
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			// 表单 Ref
			const formRef = ref();
			const formFields = ref([]);
			// 案件列表
			const caseList : any = ref([]);
			const minDate = new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() + 1));
			console.log(minDate)
			// 查询类型列表
			const formRules = {
				anjian_id: [
					{ required: false, message: '请选择案件', trigger: 'blur' }
				],
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				desc: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				date: [
					{ required: true, message: '请选择日期', trigger: 'blur' }
				],
				time: [
					{ required: true, message: '请选择时间', trigger: 'blur' }
				],
			};
			const formData = reactive({
				// 案件名称
				anjian_id: '',
				title: "",
				desc: "",
				date: "",
				time: "",

			});






			const submit = () => {
				formRef.value.validate().then(({ err, valid }) => { // 校验表单数据是否符合规则，符合则执行后续操作，否则不执行后续操作。
					console.log(err, valid)
					if (!valid) {
						return false;
					}
					let fDate = new Date(formData.date)
					let date = fDate.getFullYear() + '-' + (fDate.getMonth() + 1 > 10 ? fDate.getMonth() + 1 : '0' + (fDate.getMonth() + 1)) + '-' + fDate.getDate();
					doAddTips({
						...formData,
						date: date,
						time: formData.time + ':00'

					}).then(res => {
						console.log(res, 'res')
						uni.$wdToast.show("提交成功")
						setTimeout(() => {
							router.back({
								delta: 1,
							})
						}, 1000)
					});

				}).catch((errors) => { // 校验不通过时，执行此操作。errors为校验不通过的字段信息。
				});

			}
			onLoad((param) => {

				getCaseORderList({
					ing_all: 0,
					status: 2,
				}).then((res : any) => {
					caseList.value = res.list;
				})
			})
			onMounted(async () => {
			})
			return {
				theme,
				caseList,
				formRules,
				formData,
				formFields,
				formRef,
				submit,
				minDate,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #F2F2F2;
	}

	.container {
		padding: 24rpx;



		.form {
			padding-bottom: 180rpx;

			.checkbox {
				padding: 18rpx;
			}


			.form-item {
				padding: 18rpx !important;
				border-radius: 14rpx;
				overflow: hidden;

				:deep(.wd-textarea) {
					padding: 24rpx;
					border-radius: 14rpx;
				}

				:deep(.wd-input) {
					padding: 0 24rpx;
					border-radius: 14rpx;

					.wd-input__inner {
						height: 44px;
						line-height: 44px;
					}
				}

				:deep(.wd-cell) {
					background-color: transparent;
					padding-left: 0;

					.wd-cell__wrapper {
						padding-right: 0;
						padding: 0;
					}

					.wd-cell__right {
						margin-top: 20rpx;
						border-radius: 14rpx;
						overflow: hidden;
					}

					.wd-cell__wrapper.is-vertical .wd-cell__value {
						max-width: 100%;
					}

					.wd-cell__body {
						// background-color: #FFF;
						border-radius: 14rpx;
					}
				}

			}
		}

		.footer {
			position: fixed;
			bottom: 40rpx;
			margin: 0 24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
			left: 0rpx;

			min-height: 100rpx;
			border-radius: 21rpx 21rpx 0 0;

			.btn {
				padding: 30rpx 29rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
</style>